import React , { Component,createRef }from 'react';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";

class ReactDemo extends React.Component{
     msgRef:any = createRef()
    state:any ={
        count:0,
        list:[1,2,3,4,5],
        pamses:{
            name:'zhangsna',
            age:10
        },
        message:'this is mesasge'
    };
    handleClick=()=>{
        this.setState({
            // list:[...this.state.list,666,66777,66], // 添加数组
            list:this.state.list.filter((item:number)=>item !== 2),// 修改数据 
            pamses:{
                ...this.state.pamses,
                name:'lis si'
            },
            count:this.state.count +1
        })
        console.log(1)
    }
    handleChangeInput=(e:any)=>{
        console.log(e,)
        this.setState({
            message:e.target.value
        })
    }

    handleGetINput =(e:any)=>{
        console.log(e,'111111111111111',this.msgRef.current.value)
    }

    render(): React.ReactNode {
        return(
            <>
            <ul>
            {this.state.list.map((item:number,index:number)=><li  key={index}>{item}</li>)}
            </ul>
            <div>{this.state.pamses.name}</div>
            <div>{this.state.count}</div>
            <input type="text" value={this.state.message} onChange={this.handleChangeInput}  />
            <button >changeInput</button>
            <div onClick={this.handleGetINput}>getInput Value</div>
            <input type="text" ref={this.msgRef} />
            <br></br>
            
                <button onClick={this.handleClick}>OnClick</button>      

                <div>  测试</div>      
             </>
        )
    }
}

export default ReactDemo;
